import * as echarts from 'echarts';
import { useEffect, useState } from 'react';

const MyChartRight = () => {
    useEffect(() => {
        // const [arr, setArr] = useState([])
        const setPie = () => {
            //接口
        }
        var myChart2 = echarts.init(document.getElementById('chartsbottom2'));
        myChart2.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                data: [
                    '支付宝',
                    '微信',
                    'ETC',
                    '银联',
                    '现金',
                    '其他',
                ]
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],
                    label: {
                        position: 'inner',
                        fontSize: 14
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { title: '销售额' }
                    ]
                },
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['45%', '60%'],
                    labelLine: {
                        length: 30
                    },
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#F6F8FC',
                        borderColor: '#8C8D8E',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#6E7079',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#8C8D8E',
                                width: '100%',
                                borderWidth: 1,
                                height: 0
                            },
                            b: {
                                color: '#4C5058',
                                fontSize: 14,
                                fontWeight: 'bold',
                                lineHeight: 33
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#4C5058',
                                padding: [3, 4],
                                borderRadius: 4
                            }
                        }
                    },
                    // data: arr
                }
            ]
        })
    })
    return <>
        <div id='chartsbottom2' style={{ width: "550px", height: "380px" }} />
    </>
}

export default MyChartRight